<template>
	<view class="giveBack">
		<!-- 设备归还 详情  页面-->
		<navBar title="设备归还"  goBackUrl="/subpackage-equipment/pages/device/deviceGoBack/deviceGoBack" @goBack="goBack"></navBar>
		
		<scroll-view scroll-y="true" class="scroll-box">
			<view class="content">
				<view class="project">
					<image class="image" src="/subpackage-equipment/static/project1.png" mode=""></image>
					<view class="name">
						<view class="t1">{{ projectName }}</view>
						<view class="t2">{{ subProjectName }}</view>
					</view>
				</view>
				
				<view class="box uniCollapse">
					<view class="nav border">
						<view class="name">出库编号</view>
						<view class="value">{{ code || "" }}</view>
					</view>
					
					<view class="nav border">
						<view class="name">按设备出库单归还</view>
						<view class="value width">
							<checkbox-group @change="checkboxChangeAll" class="radio">
								<label class="label" >
									<text class="text">{{allCheck.name}}</text>
									<checkbox :value="allCheck.value" :checked="allCheck.isChecked"  class="color round"/>
								</label>
							</checkbox-group>
						</view>
					</view>
					
					<uni-collapse>
						<checkbox-group @change="checkboxChange">
					    <uni-collapse-item v-for="(item, index) in deviceInfoList" title-border="show" :key="index" :title="item.name" :value="item.totalNum+''">
							<template v-slot:title>
								<view class="collapse-title">
									<view class="left">
										{{ item.name }}
									</view>
									<view class="right">
										{{ item.totalNum }}
									</view>
								</view>
							</template>
							<!-- <checkbox-group @change="checkboxChange"> -->
								<label v-for="value in item.infoList" :key="value.id">
									<view class="center">
										<view class="item">
											<view class="name">设备编号：</view>
											<view class="value">{{ value.code }}</view>
										</view>
										<view class="item">
											<view class="name">规格型号：</view>
											<view class="value">{{ value.specificationModel }}</view>
										</view>
										<!-- <view class="item">
											<view class="name">存储区域：</view>
											<view class="value">{{ value.storageAreaName }}</view>
										</view> -->
										<view class="item">
											<view class="name">基地名称：</view>
											<view class="value">{{ value.stationName }}</view>
										</view>
										<checkbox :value="value.id + ''" :checked="value.isChecked" class="checkbox color round" />
									</view>
								</label>
							<!-- </checkbox-group> -->
					    </uni-collapse-item>
						</checkbox-group>
					</uni-collapse>
				</view>
				
				
				<view class="number">
					<view class="num1">出库小计：{{ comeTotal || 0 }}</view>
					<view class="num2">归还小计：{{ boBackTotal || 0 }}</view>
				</view>
				
				
				<!-- 损耗原因 -->
				<view class="cause">
					<view class="loss">
						损耗原因
					</view>
					<u--textarea v-model="textareaValue" placeholder="请填写损耗原因" ></u--textarea>
					<!-- <textarea class="textarea" value="" placeholder="请填写损耗原因" placeholder-style="" /> -->
					
					<!-- <view class="button">
						提交
					</view> -->
				</view>
			</view>
		</scroll-view>
		
		<view class="fixedButton">
			<u-button type="primary"  :loading="loading" text="提交" @click="submit"></u-button>
		</view>
		
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar.vue"
	import { getEquipmentListCode, getEqReturnWarehouseSaveEx, getEqReturnWarehouseExCode } from "@/api/device/deviceOut.js"
	import mixins from "@/utils/mixins.js"
	import uniCollapse from "./../../../components/uni-collapse/components/uni-collapse/uni-collapse.vue";
	export default{
		name: "giveBack",
		mixins: [mixins],
		components: {
			navBar,uniCollapse
		},
		data() {
			return {
				loading: false,
				code: "",      // 出库code
				projectName: "",  // 项目名称
				subProjectName: "",  // 标段和工点名称
				comeTotal: "",           // 出库设备总数量
				boBackTotal: "",         // 归还设备总数量
				deviceInfoList: [],  	// 设备出库详情列表
				checkBoxAll: [],    	// 全选
				checkBoxSelectList: [],       // 多选框选中的 id 数组
				textareaValue: "",            // 损耗原因
				allCheck : {
					name : '全选',
					value : 'all',
					isChecked : false,	
				},
			}
		},
		onLoad(option) {
			this.code = option.code
			this.projectName = option.projectName
			this.subProjectName = option.subProjectName
			this.getDeviceInfo(this.code)
			// console.log(option)
		},
		methods: {
			// 是否全选
			checkboxChangeAll(e){
				// this.checkBoxAll = e.detail.value
				if(e.detail.value.length !== 0){
					this.deviceInfoList.forEach(item=>{
						if(item.infoList && item.infoList.length > 0){
							item.infoList.forEach(value=>{
								this.$set(value, 'isChecked', true)
							})
						}
					})
					this.allCheck.isChecked = true
				}else{
					this.deviceInfoList.forEach(item=>{
						if(item.infoList && item.infoList.length > 0){
							item.infoList.forEach(value=>{
								this.$set(value, 'isChecked', false)
							})
						}
					})
					this.allCheck.isChecked = false
				}
				
				this.getGoBackTotal()
				
			},
			
			// 多选框是否选择
			checkboxChange(e){
				this.checkBoxSelectList = e.detail.value
				let index = 0
				let newList = []
				this.deviceInfoList.forEach(item=>{
					if(item.infoList){
						item.infoList.forEach(value=>{
							if(this.checkBoxSelectList.includes(value.id +"")){
								this.$set(value, 'isChecked', true)
							}else{
								this.$set(value, 'isChecked', false)
							}
							newList.push(value)
						})
					}
				})
				
				newList.forEach(item=>{
					if(item.isChecked){
						index ++
					}
				})
				if(index === newList.length){
					this.allCheck.isChecked = true
				}else{
					this.allCheck.isChecked = false
				}
				this.getGoBackTotal()
			},
			
			// 获取 归还总数
			getGoBackTotal(){
				this.boBackTotal = 0
				this.deviceInfoList.forEach(item=>{
					if(item.infoList && item.infoList.length > 0){
						item.infoList.forEach(value=>{
							if(value.isChecked){
								this.boBackTotal ++ 
							}
						})
					}
				})
			},
			
			// 出库详情数据
			async getDeviceInfo(code){
				let res = await getEquipmentListCode({code})
				let list = res.result
				let res2 = await getEqReturnWarehouseExCode({excode: code})
				let list2 = res2.result.map(item=> item.deviceId)
				
				let tempList = list.filter(item=>{
					return !list2.find(value=> item.deviceId === value)
				})
				
				// getEquipmentListCode({code}).then(res=>{
					this.comeTotal = tempList.length || 0
					let newList = tempList.map(item=>({...item, totalNum:1}))
					this.deviceInfoList = this.DelSameObjValue(newList, 'name', 'totalNum').map(item=>({id: item.id, name: item.name, totalNum: item.totalNum,infoList: []}))
					this.deviceInfoList.forEach(item=>{
						newList.forEach(value=>{
							value.isChecked = false
							// value.code = item.id + '-' + value.id
							if(item.name === value.name){
								item.infoList.push(value)
								value.tempCode = item.id + '-' + value.id
							}
						})
					})
					console.log(this.deviceInfoList)
				// })
			},
			
			// 提交
			submit(){
				let arr = []
				let list = []
				let ids = []
				let eqNames = []
				this.deviceInfoList.forEach(item=>{
					if(item.infoList && item.infoList.length > 0){
						item.infoList.forEach(value=>{
							arr.push(value)
							if(value.isChecked){
								list.push(value)
							}
						})
					}
				})
				if(list.length > 0){
					list.forEach(item=>{
						ids.push(item.deviceId)
						eqNames.push(item.name)
					})
					eqNames = Array.from(new Set(eqNames))
					let projectCascade = this.projectName+'/'+this.subProjectName
					let _data = {
						exCode: this.code,
						lossReason: this.textareaValue,
						deviceIds: ids,
						eqNames: eqNames.join(","),
						projectCascade
					}
					console.log(list.length, arr.length)
					if(list.length !== arr.length){
						uni.showModal({
							title: '提示',
							content: '当前归还与出库数量不符，是否确认提交?',
							success:  (res) =>{
								if (res.confirm) {
									// console.log('用户点击确定');
									this.getSave(_data)
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}else{
						this.getSave(_data)
					}
					
				}else{
					uni.showToast({
						icon: "none",
						title: "请选择要归还的设备"
					})
				}
				
			},
			
			getSave(_data){
				if(this.loading) return
				this.loading = true
				console.log(_data)
				getEqReturnWarehouseSaveEx(_data).then(res=>{
					 if(res.success){
						this.loading = false
						uni.showToast({
							icon: "none",
							title: "归还成功"
						})
						uni.redirectTo({
							url: "/subpackage-equipment/pages/device/deviceGoBack/deviceGoBack"
						})
					}
					this.loading = false
				})
			},
			
			goBack(url){
				uni.navigateBack({
					url : url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.giveBack{
		font-family: PingFang SC-Bold, PingFang SC;
		padding-bottom: 80rpx;
		/* #ifdef MP-WEIXIN */
			padding-top: 200rpx;
		/* #endif */
		.scroll-box{
			height: calc(100vh - 250rpx);
			padding-top: 10rpx;
		}
		.content{
			background: #F5F7FA;
			padding-top: 30rpx;
			.project{
				background-color: #FFFFFF;
				padding: 0rpx 30rpx;
				height: 150rpx;
				display: flex;
				align-items: center;
				padding-top: 40rpx;
				box-sizing: border-box;
				.image{
					width: 70rpx;
					height: 70rpx;
					margin-left: 29rpx;
					margin-right: 40rpx;
				}
				.name{
					.t1{
						font-size: 32rpx;
						font-weight: bold;
						color: #445469;
					}
					.t2{
						font-size: 28rpx;
						font-weight: 500;
						color: #6A819E;
						margin-top: 5rpx;
					}
				}
			}
			
			.box{
				padding: 0rpx 30rpx;
				padding-bottom: 30rpx;
				background-color: #FFFFFF;
			}
			.nav{
				line-height: 100rpx;
				height: 100rpx;
				padding: 0rpx 28rpx;
				display: flex;
				justify-content: space-between;
				
				.name{
					font-size: 32rpx;
					font-weight: bold;
					color: #445469;
				}
				.value{
					font-size: 32rpx;
					font-weight: bold;
					color: #445469;
				}
				.width{
					width: 150rpx;
					.label{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
			.border{
				border-bottom: 1rpx solid #d6d7d9;
			}
			
			
			.center{
				position: relative;
				background-color: #FBFDFF;
				padding: 32rpx 38rpx;
				padding-top: 12rpx;
				.item{
					display: flex;
					margin-top: 20rpx;
					
					.name{
						width: 150rpx;
					}
				}
				.checkbox{
					position: absolute;
					top: 26rpx;
					right: 26rpx;
				}
			}
			
			.number{
				height: 92rpx;
				line-height: 92rpx;
				background: #F5F7FA;
				padding: 0rpx 60rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				font-weight: 500;
				color: #445469;
			}
			
			.cause{
				background-color: #FFFFFF;
				padding: 38rpx 33rpx;
				.loss{
					font-size: 28rpx;
					font-weight: 400;
					color: #445469;
					margin-bottom: 20rpx;
				}
				.textarea{
					border: 2rpx solid #DCDFE6;
					border-radius: 10rpx;
					width: 100%;
					height: 150rpx;
					padding: 15rpx;
					box-sizing: border-box;
				}
				
				.button{
					width: 100%;
					height: 92rpx;
					line-height: 92rpx;
					text-align: center;
					background: #2F80ED;
					color: #FFFFFF;
					margin-top: 65rpx;
					margin-bottom: 20rpx;
				}
			}
		}
		
	}
</style>
